<template>
  <div class="container">
    <!--  设置类型-->
    <TypeCard @change="change" :value="current"></TypeCard>
    <!--  右侧内容-->
    <div class="container-right">
      <!--    表格区域-->
      <div class="right-table" v-if="current === 0">
        <competences></competences>
      </div>
      <div class="right-table" v-if="current === 1">
        <Positions></Positions>
      </div>
      <div class="right-table" v-if="current === 2">
        <Grades></Grades>
      </div>
      <div class="right-table" v-if="current === 3">
        <resignations></resignations>
      </div>
    </div>
  </div>
</template>

<script>
//引入类型卡片组件
import TypeCard from "@/views/system/components/TypeCard";
import basicSetting from "@/composables/system/basic-setting";
import Competences from "./BasicSetting/compontents/Competences";
import Positions from "./BasicSetting/compontents/Positions";
import Grades from "./BasicSetting/compontents/Grades";
import Resignations from "./BasicSetting/compontents/Resignations";
export default {
  components: {
    TypeCard,
    Competences,
    Positions,
    Grades,
    Resignations,
  },
  name: "BasicSetting",
  setup() {
    const { current, change } = basicSetting();
    return {
      current,
      change,
    };
  },
};
</script>

<style scoped lang="scss">
.container {
  display: flex;
  .container-right {
    flex: 1;
    padding: 20px 12px;
    margin-left: 30px;
    background: #ffffff;
    box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);
    opacity: 1;
    border-radius: 6px;

    .right-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
